$bg-color: #333;
$color-error: #F55;
$color-ok: #5F5;
$color-warn: #FF5;
$bg-hover-color: #345;
$icon-color: #fff;
$icon-disabled: rgba($color: $icon-color, $alpha: 0.5);
$icon-active: #77f;
$icon-primary: rgb(34, 101, 179);
$step: 32px;
$separator-size: $step * 0.25 * 0.5;
$font-size: $step * 0.5;
$notifier-height: $step * 4;


*>* {
    border: 0px;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body,
html,
#root,
#app,
#editor,
#editor-container {
    width: 100%;
    height: 100%;
    color: $icon-color;
}

body {
    overflow: hidden;
}

.text-button {
    cursor: pointer;
    text-decoration: underline;
}

#root {
    background-color: $bg-hover-color;
    color: $icon-color;
    font-family: monospace;
    font-size: $font-size;

    .list {
        list-style: none;

        li {
            padding-left: $step * 0.5;
        }
    }

    .select-list {
        list-style: none;

        li {
            .text-button:hover {
                text-decoration: underline;
            }

            .text-button {
                text-decoration: none;
            }
        }

        li::before {
            content: "▸ ";
        }
    }


    a {
        color: $icon-color;
    }

    p {
        margin: $separator-size 0;
    }

    .popup-input {
        font-size: $step * 0.75;
        font-size: $step * 0.25;
        color: $bg-color;
        background-color: $icon-color;
        font-size: $step * 0.75;
        margin-top: $step * 0.5;
        width: 100%;
    }

    .popup-textarea {
        @extend .popup-input;
        height: $step * 6;
        height: $step * 8;
    }

}


#text-editor {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: $icon-color;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto;

    #editor-container {
        overflow: hidden;

        .editor {
            width: 100%;
            height: 100%;
        }
    }
}

#menu {
    position: absolute;
    left: auto;
    bottom: auto;
    top: auto;
    right: auto;
    background-color: $bg-color;
    padding: $separator-size;
}


#text-editor.left {
    left: 0;
    top: 0;
}

#text-editor.right {
    right: 0;
    top: 0;
}

#text-editor.top {
    left: 0;
    top: 0;
}

#text-editor.bottom {
    left: 0;
    bottom: 0;
}

#text-editor.top,
#text-editor.bottom {
    .button-icon+.button-icon {
        margin-left: $separator-size;
    }
}

#text-editor.left,
#text-editor.right {
    .button-icon+.button-icon {
        margin-top: $separator-size;
    }
}

#map-container {
    height: 100%;
    width: 100%;

    .map {
        height: 100%;
        width: 100%;
    }

    #info-block {
        position: absolute;
        bottom: auto;
        right: auto;
        top: auto;
        left: auto;
        color: $icon-color;
        white-space: pre;
        height: fit-content;

        #intersect-info {
            background-color: $bg-color;
            padding: $separator-size * 2;
            font-weight: bold;
        }
    }

    #controls-container {
        position: absolute;
        left: auto;
        top: auto;
        right: auto;
        bottom: auto;
    }

    #copyright {
        background-color: $bg-hover-color;
        position: absolute;
        bottom: 0;
        right: 0;
        opacity: 0.5;
        padding: 2px 6px;
    }

    #copyright:hover {
        opacity: 1;
        background-color: $bg-color;
        transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out;
    }
}

#map-container.bottom,
#map-container.top {
    #menu .button-icon {
        float: left;
    }
}

#map-container.left>#menu {
    bottom: 0;
    left: -$separator-size;
}

#map-container.right>#menu {
    bottom: 0;
    right: -$separator-size;
}

#map-container.top>#menu {
    top: -$separator-size;
    left: 0;
}

#map-container.bottom>#menu {
    bottom: -$separator-size;
    left: 0;
}

#map-container.left>#menu.hidden {
    left: 0;
}

#map-container.right>#menu.hidden {
    right: 0;
}

#map-container.top>#menu.hidden {
    top: 0;
}

#map-container.bottom>#menu.hidden {
    bottom: 0;
}


#map-container.left,
#map-container.top,
#map-container.float,
#map-container.bottom {
    #info-block {
        bottom: 0;
        right: 0;
    }

    #controls-container {
        top: 0;
        bottom: 0;
        right: 0;
    }
}

#map-container.bottom {
    #info-block {
        top: 0;
        right: 0;
    }

    #copyright {
        bottom: auto;
        top: 0;
    }
}

#map-container.right {
    #info-block {
        bottom: 0;
        left: 0;
    }

    #controls-container {
        top: 0;
        bottom: 0;
        left: 70px;
    }

    #copyright {
        bottom: 0;
        right: auto;
        left: 0;
    }
}

#mouse-catcher {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#mouse-catcher.left,
#mouse-catcher.right {
    cursor: ew-resize;
}

#mouse-catcher.top,
#mouse-catcher.bottom {
    cursor: ns-resize;
}

.button-icon.top {
    transform: rotate(90deg);
}

.button-icon.right {
    transform: rotate(180deg);
}

.button-icon.bottom {
    transform: rotate(270deg);
}

.button-icon {
    color: $icon-color;
    width: $step;
    height: $step;
    font-size: $step * 0.75;
    outline: none;
    padding: $step * 0.25 * 0.5;
    background-color: $bg-color;
    display: block;
    position: relative;

    span {
        color: $icon-color;
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 0.6em;
        background-color: rgba($color: $bg-color, $alpha: 0.7);
        border-radius: 4px;
    }
}

.button-icon.error {
    color: $color-error;
}

.button-icon.secondary {
    color: $icon-disabled;
}

.button-icon.primary {
    background-color: $icon-primary;
}

.button-icon.warn {
    color: $color-warn;
}

.icon {
    color: $icon-color;
    width: $step;
    height: $step;
    font-size: $step * 0.75;
    outline: none;
    padding: $step * 0.25 * 0.5;
    background-color: $bg-color;
    display: block;
}

.button-icon.small {
    color: $icon-color;
    font-size: $step * 0.5;
    outline: none;
    width: $step * 0.75;
    height: $step * 0.75;
    background-color: $bg-color;
    display: block;
}

.button-icon.active {
    background-color: $icon-active;

    span {
        background-color: $icon-active;
    }
}

.button-icon:active {
    color: $icon-active;
}


.button-icon.disabled {
    color: $icon-disabled;
}

.button-icon:hover {
    background-color: $bg-hover-color;

    span {
        background-color: $bg-hover-color;
    }
}

.button-icon.disabled:hover {
    background-color: $bg-color;

    span {
        background-color: $bg-color;
    }
}

.popup {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.4);

    .window {
        position: relative;
        background-color: $bg-hover-color;
        margin: 0 auto;
        top: 50%;
        transform: translateY(-50%);
        width: max-content;

        header {
            background-color: $bg-color;
            text-align: center;
            font-size: $step * 0.5;
            padding: $step * 0.25;
            height: $step;

            .button-icon {
                position: absolute;
                top: 0;
                right: 0;
            }
        }


        >.content {
            padding: $step * 0.25;
            max-height: 80vh;
            max-width: 80vw;
            min-width: $step * 12;
            min-height: $step * 8;
            overflow: auto;

            .info {
                max-width: 800px;
                max-height: 600px;
                overflow: auto;

                section+section {
                    margin-top: $step * 0.5;
                }
            }
        }
    }

    .window.close-button {
        header {
            padding-right: $step * 0.25 + $step;
        }
    }
}

.tabs {
    >ul {
        display: table;
        width: 100%;
        border-bottom: $bg-color $separator-size solid;
        user-select: none;
        margin-bottom: $separator-size;

        li {
            padding: $separator-size * 2 $step * 0.5 $separator-size;
            display: table-cell;
            text-align: center;
        }

        li:hover,
        li.active {
            background-color: $bg-color;
        }

        li.disabled:hover,
        li.disabled {
            color: $icon-disabled;
            background-color: transparent;
        }
    }

    .tab-content {
        padding: $step * 0.5;
    }
}

.no-select {
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.select {
    user-select: unset;
    -ms-user-select: unset;
    -webkit-user-select: unset;
    -moz-user-select: unset;
}

h3 {
    text-align: center;
    margin-top: $step * 0.5;
    margin-bottom: $step * 0.5;
}

#create-technique {
    input {
        margin-bottom: $step * 1.25;
        padding: $step * 0.1 $step * 0.25;
    }

    .button-icon {
        position: absolute;
        bottom: $step * 0.25;
        right: $step * 0.25;
        display: inline-block;
    }
}

.split-view {
    background-color: $bg-color;
    position: relative;
    overflow: hidden;
    widows: 100%;
    height: 100%;

    >section {
        position: absolute;
        overflow: hidden;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: $icon-color;
    }

    >.separator {
        background-color: $bg-color;
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
    }

    >.mouse-catcher {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

.split-view.horizontal {

    >.separator,
    >.mouse-catcher {
        cursor: ew-resize;
    }
}

.split-view.vertical {

    >.separator,
    >.mouse-catcher {
        cursor: ns-resize;
    }
}

#text-editor-container {
    width: 100%;
    height: 100%;
    position: relative;

    >div {
        height: 100%;
    }
}

.highlightedLine {
    background-color: rgb(169, 255, 119);
}

#notifications {
    height: 100%;
    background-color: $bg-color;
    padding: $separator-size;
    overflow: auto;

    ul {
        display: block;
        // height: $notifier-height - ($separator-size * 2);

        li.error {
            color: $color-error;
        }
    }
}

#popup-copy-link {
    .popup-input {
        width: calc(100% - (#{$step + $separator-size}));
        margin-top: 0;
        height: $step;
    }

    .button-icon {
        display: inline-block;
        vertical-align: sub;
        float: right;
    }

    clear: both;
}

#share-link-popup {
    .window {
        .content {
            min-height: auto;
        }
    }
}